<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8' />

    <title>Shapefile in Leaflet!</title>
    <style>
        html {
            height: 100%
        }

        body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #map {
            height: 100%
        }
    </style>
    <link rel="stylesheet" href="site/leaflet.css" />

   
    
</head>

<body>
    <div id="map"></div>

    <script src="site/leaflet.js"></script>
    <!-- <script type="module" src="index.js"></script> -->
    <script src="/lib/shp.umd.js"></script>
    <script>
        var m = L.map('map').setView([34.74161249883172, 18.6328125], 2);
        var geo = L.geoJson({ features: [] }, {
            onEachFeature: function popUp(f, l) {
                var out = [];
                if (f.properties) {
                    for (var key in f.properties) {
                        out.push(key + ": " + f.properties[key]);
                    }
                    l.bindPopup(out.join("<br />"));
                }
            }
        }).addTo(m);
        var base =location.protocol +"//"+ location.host + '/test/files/TM_WORLD_BORDERS_SIMPL-0.3.zip';
        shp(base, null, "GB18030").then(function (data) {
            geo.addData(data);
        });

    </script>
</body>

</html>